<template>
  <div>
    <tab-bar>
      <tab-bar-item path="/home">
        <img slot="item_icon" src="@/assets/img/TabBar/home.svg" alt=""  />
        <img slot="item_icon_active" src="@/assets/img/TabBar/home_active.svg" alt=""  />
        <div slot="item_text" class="item_text">首页</div>
      </tab-bar-item>
      <tab-bar-item path="/mall">
        <img slot="item_icon" src="@/assets/img/TabBar/mall.svg" alt=""  />
        <img slot="item_icon_active" src="@/assets/img/TabBar/mall_active.svg" alt="" />
        <div slot="item_text" class="item_text">闲置</div>
      </tab-bar-item>
      <tab-bar-item path="/square">
        <img slot="item_icon" src="@/assets/img/TabBar/square.svg" alt=""  />
        <img slot="item_icon_active" src="@/assets/img/TabBar/square_active.svg" alt=""  />
        <div slot="item_text" class="item_text">广场</div>
      </tab-bar-item>
      <tab-bar-item path="/chat">
        <img slot="item_icon" src="@/assets/img/TabBar/qunliao.svg" alt="" />
        <img slot="item_icon_active" src="@/assets/img/TabBar/qunliao_active.svg" alt=""  />
        <div slot="item_text" class="item_text">聊天室</div>
      </tab-bar-item>
      <tab-bar-item path="/profile">
        <img slot="item_icon" src="@/assets/img/TabBar/profile.svg" alt=""/>
        <img slot="item_icon_active" src="@/assets/img/TabBar/profile_active.svg" alt="" />
        <div slot="item_text" class="item_text">用户</div>
      </tab-bar-item>
    </tab-bar>
  </div>
</template>

<script>
import TabBar from "../components/TabBar/TabBar.vue";
import TabBarItem from "../components/TabBar/TabBarItem.vue";

export default {
  name: "",
  components: {
    TabBar,
    TabBarItem
  },
  data() {
    return {};
  },
  methods: {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
